<template>
  <page-form :x-uri="uri" :bind-datas="{ password: '' }" :bind-rules="rules" :disable-submit-btn="disableSubmit" :bind-submit="submit" reset-btn-text="撤销修改">
    <!-- 自定义tab -->
    <template v-slot:page-tabs>
      <tabs :tabs="tabs" />
    </template>
  </page-form>
</template>

<script>
import PageForm from '@public/template/page_form.vue';
import SparkMD5 from 'spark-md5';
import { mapState } from 'vuex';
import Tabs from './tabs';
export default {
  components: {
    PageForm,
    Tabs
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/user/admin/account/' + this.$route.params.id + '/edit',
      tabs: [
        {
          title: '编辑学员',
          uri: '/user/student/' + this.$route.params.id + '/edit',
          meta: {
            permission: 'user.student.edit'
          }
        }
      ],
      disableSubmit: false,
      rules: {
        password: [
          {
            pattern: /^[a-zA-Z\d\-_&:;\'<>,=%`~!@\\#\(\)\$\^\*\+\|\{\}\[\]\.\?\/]{6,20}$/,
            message: '密码须为数字、字母和英文标点符号组成的6-20位字符',
            trigger: ['blur', 'change']
          }
        ],
        phone: [
          { required: true, message: '手机号为必填项', trigger: ['blur', 'change'] },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: ['blur', 'change']
          }
        ]
      }
    };
  },
  computed: {
    ...mapState('pageForm', {
      pageData: 'responseData'
    })
  },
  methods: {
    submit: function(form) {
      this.disableSubmit = true;
      this.$http.send(
        'PUT',
        '/user/admin/account/' + this.$route.params.id,
        {
          ...form,
          password: form.password ? SparkMD5.hash(form.password) : ''
        },
        response => {
          this.$message.success(response.msg);
          this.reload();
        },
        response => {
          this.disableSubmit = false;
          this.$message.error(response.msg);
        }
      );
    }
  }
};
</script>
